import { t } from 'i18next'
import React from 'react'
import { StyledIPWrap, StyledSimpleSearchItem, StyledWrap } from './style'
import {
	DepartmentUser,
	isNotTreeNodePendingItem,
	isTreeNodePendingItem,
	isUser,
	PendingItem,
	Template,
} from '../../../../translator'
import { createPortal } from 'react-dom'
import { useIpTip } from './hooks'
import {
	IconSwitch,
	IconWhiteBGSelect,
	IconGreenBGSelect,
	IconLeftWhite,
	IconVideoCallBlue,
	IconAudioCallBlue,
	IconPhoneCallBlue,
} from '../../../../components/Icons'
import { Avatar } from '@/components/Avatar'
import { CONSTANT } from '../../../../utils/utils'
import { usePendingStore } from '../../store'
import shallow from 'zustand/shallow'
import { itemAddToRight } from '../../../../store.trans'

interface ListItemProps {
	data: PendingItem
}
interface IpTipProps {
	item: DepartmentUser
	position: {
		top: number
		left: number
	}
}

function IpTip({ item, position }: IpTipProps) {
	return (
		<StyledIPWrap style={{ top: position.top || 0, left: position.left || 0 }}>
			<div>
				{t('别名')}:{item.name}
			</div>
			<div>
				{t('IP地址')}:{item.ip}
			</div>
		</StyledIPWrap>
	)
}
function SimpleSearchItem({ user }: { user: DepartmentUser | Template }) {
	const avatarValue = isUser(user) ? { portrait: user.portrait, accountType: 1 } : { portrait: '', accountType: 10 }
	return (
		<StyledSimpleSearchItem>
			<Avatar value={avatarValue} />
			<div className="user-info">
				<div>{user.name}</div>
				{isUser(user) && <div className="dept-info">{user.dept.departmentName}</div>}
			</div>
		</StyledSimpleSearchItem>
	)
}

export function ListItem({ data }: ListItemProps) {
	const { item, nestingLevel, status } = data
	const { searchType, clickSelectItem, toggleTree, openMoreOptions } = usePendingStore(
		(state) => ({
			searchType: state.searchType,
			clickSelectItem: state.clickSelectItem,
			toggleTree: state.toggleTree,
			openMoreOptions: state.openMoreOptions,
		}),
		shallow
	)
	const isSimpleSearch = searchType === CONSTANT.searchType.simple
	const [ipTip, position] = useIpTip(item)
	const handleClick = (e: React.MouseEvent) => {
		clickSelectItem(data, { ctrlKey: e.ctrlKey, shiftKey: e.shiftKey })
	}
	const handleDblClick = () => {
		if (isTreeNodePendingItem(data)) {
			toggleTree(data, searchType)
		} else if (isNotTreeNodePendingItem(data)) {
			itemAddToRight(data, 'auto')
		}
	}
	const handleToggleTree = (e: React.MouseEvent) => {
		e.stopPropagation()
		if (isTreeNodePendingItem(data)) {
			toggleTree(data, searchType)
		}
	}
	const handleMoreOpt = (e: React.MouseEvent) => {
		e.stopPropagation()
		openMoreOptions(data)
	}
	const handleAddToRight = (callType: 'video' | 'audio' | 'phone') => (e: React.MouseEvent) => {
		e.stopPropagation()
		if (isNotTreeNodePendingItem(data)) {
			itemAddToRight(data, callType)
		}
	}
	return (
		<StyledWrap
			nestingLevel={nestingLevel}
			status={status}
			onClick={handleClick}
			onDoubleClick={handleDblClick}
			onMouseEnter={() => ipTip.handleShowIpTip(true)}
			onMouseLeave={() => ipTip.handleShowIpTip(false)}
			onMouseMove={position.handleSetPosition}
		>
			<div className="icon-wrap">
				{status.isParent && (
					<IconSwitch className="icon-arrow" isOpen={status.isOpen} onClick={handleToggleTree} />
				)}
				{!status.isParent && status.isInMcc ? (
					<IconWhiteBGSelect />
				) : status.isAdded ? (
					<IconGreenBGSelect />
				) : (
					''
				)}
			</div>
			<div className="item-content" title={item.name}>
				{isSimpleSearch && !status.isParent ? (
					<SimpleSearchItem user={item as DepartmentUser | Template} />
				) : (
					<div className="item-name">{item.name}</div>
				)}
			</div>
			<div className="more-options">
				{status.isSelected &&
					!status.isParent &&
					(status.isOpenMoreOpt ? (
						<>
							<IconVideoCallBlue onClick={handleAddToRight('video')} />
							<IconAudioCallBlue onClick={handleAddToRight('audio')} />
							{isUser(item) && (item.mobilePhone || item.workPhone) && (
								<IconPhoneCallBlue onClick={handleAddToRight('phone')} />
							)}
						</>
					) : (
						<IconLeftWhite onClick={handleMoreOpt} />
					))}
			</div>
			{ipTip.show &&
				createPortal(
					<IpTip item={item as DepartmentUser} position={position.position} />,
					window.document.body
				)}
		</StyledWrap>
	)
}
